import "./index.scss"
import {View, Image, Text, Button} from "@tarojs/components"
import {observer} from "mobx-react"
import {useContext, useEffect, useState} from "react"
import Taro, {useDidHide, useDidShow, useLoad, useRouter} from "@tarojs/taro"
import {wxScanAuthStore} from "./model"
import {wxScan} from "@/api/user"
import {imagesUrl} from "@/utils/baseUrl"
import MyNav from "@/components/nav"
import scanStore from "@/store/scan"
import {toHome} from "@/utils/pageRedirect"
import {getStorage, removeStorage} from "@/utils/localstoreage"
import {IconImg} from "@/components/images"

const Wxscanauth = () => {
	let router = useRouter()
	const {pageQuery, getPageQuery} = useContext(wxScanAuthStore)

	const {handleScan} = useContext(scanStore)

	const [overTimeTimer, setOverTimeTimer] = useState<NodeJS.Timeout | undefined>(undefined)

	const [isOverTime, setIsOverTime] = useState(false)

	// 可以使用所有的 React Hooks
	useEffect(() => {
		console.log("Wxscanauth useEffect")
	})

	// 对应 onShow
	useDidShow(() => {
		console.log("Wxscanauth useDidShow")
		if (overTimeTimer) clearTimeout(overTimeTimer)
		let timer = setTimeout(() => {
			setIsOverTime(true)
		}, 50 * 1000)
		setOverTimeTimer(timer)
	})

	// 对应 onHide
	useDidHide(() => {
		console.log("Wxscanauth useDidHide")
		if (overTimeTimer) clearTimeout(overTimeTimer)
	})

	// 对应onLoad 但是路由参数只能通过rotuer获取
	useLoad(() => {
		getPageQuery(router.params, ["address"])
		removeStorage("qrcodeType")
		removeStorage("webScanLogin_address")
	})

	function handleConfirm() {
		// const userWeichatId = getStorage('userWeichatId')
		const userWeichatId = getStorage("userYSJWeichatId")
		if (!userWeichatId) return
		if (!pageQuery.address) return
		wxScan({
			address: pageQuery.address,
			userYSJWeichatId: userWeichatId
		})
			.then(_res => {
				Taro.showToast({
					title: "授权成功!",
					icon: "success"
				})
				removeStorage("qrcodeType")
				removeStorage("webScanLogin_address")
				toHome()
			})
			.catch(_err => {
				Taro.showToast({
					title: "登陆失败！"
				})
			})
	}
	return (
		<View
			className="w-screen h-screen overflow-hidden flex flex-col justify-between"
			style={{
				backgroundImage: `url(${imagesUrl + "device-bg.png"})`,
				backgroundSize: "100% 58%",
				backgroundRepeat: "no-repeat"
			}}
		>
			{/* 自定义头部栏 */}
			<MyNav color="white">微信扫码授权</MyNav>

			<View className="flex-1 w-full pt-0 pb-40 px-16">
				<View className="w-full h-16_24 mt-4_24 rounded-12 bg-white flex flex-col items-center justify-between">
					<View className="w-full flex flex-col items-center mt-120">
						{/* <Image
              src={imagesUrl + 'logo-simple.png'}
              className="w-120 h-120 mt-60"
            ></Image> */}
						<IconImg
							imgName="computer"
							style={{
								width: "240rpx",
								height: "190rpx"
							}}
						></IconImg>
						<View className="text-22 font-bold mt-16">
							{/* 登录<Text className="mx-4">PC端</Text>设备管理平台 */}
							登录相关设备管理平台
						</View>
						{isOverTime ? (
							<View className="text-12 text-danger mt-8">
								登录确认已失效，请重新扫码登录
							</View>
						) : null}
					</View>

					{isOverTime ? (
						<Button
							className="px-32 bg-primary text-white mb-60"
							onClick={() => handleScan()}
						>
							重新扫码登录
						</Button>
					) : (
						<Button
							className="px-32 bg-primary text-white mb-60"
							onClick={handleConfirm}
						>
							确认登录
						</Button>
					)}
				</View>
			</View>
		</View>
	)
}
export default observer(Wxscanauth)
